<template>
<div class="correlation-matrix">
    <el-radio-group @change="changeRadio" v-model="radio">
        <el-radio label="皮尔森系数">皮尔森系数</el-radio>
        <el-radio label="余弦相似度">余弦相似度</el-radio>
        <!-- <el-radio label="协方差">协方差</el-radio> -->
        <el-radio v-if="hasMInformation" label="互信息">互信息</el-radio>
    </el-radio-group>
    <div  class="chart-label">相关性系数</div>
    <div id="main" style="width: 100%;height:360px;"></div>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'CorrelationMatrix',
    data () {
        return {
            radio: '皮尔森系数',
            originData: [],
            chartData: [],
            showList: [],
            hasMInformation: false
        }
    },
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData',
            selectedField: 'common/getSelectedField'
        })
    },
    mounted () {
        this.changeRadio()
        if (this.analysisReportData.content['互信息']) {
            this.hasMInformation = true
        }
    },
    watch: {
        selectedField (val) {
            this.changeRadio()
        }
    },
    methods: {
        changeRadio (val) {
            this.chartData = []
            this.showList = []
            this.originData = []
            let list = this.analysisReportData.content['散点图']
            for (let j = 0; j < list.length; j++) {
                if (this.selectedField.includes(list[j].featureName) && list[j].featureType !== 'label') {
                    this.showList.push(j)
                }
            }
            if (this.radio !== '互信息') {
                this.originData = this.analysisReportData.content[this.radio]
                for (let i = 0; i < this.originData.length; i++) {
                    for (let k = 0; k < this.originData.length; k++) {
                        this.chartData.push([k, i, Math.floor(this.originData[i][k] * 1000) / 1000])
                    }
                }
                for (let i = 0; i < list.length; i++) {
                    if (!this.showList.includes(i)) {
                        this.chartData = this.chartData.filter(v => (v[0] !== i && v[1] !== i))
                    }
                }
                let listLenArr = list.map((v, i) => i)
                for (let j = listLenArr.length - 1; j >= 0; j--) {
                    if (!this.showList.includes(j)) {
                        for (let i = 0; i < this.chartData.length; i++) {
                            for (let k = 0; k < 2; k++) {
                                if (this.chartData[i][k] > listLenArr[j]) {
                                    this.chartData[i][k]--
                                }
                            }
                        }
                    }
                }
            }
            this.getMap()
        },
        getMap () {
            var myChart = this.$echarts.init(document.getElementById('main'))
            let option = {
                grid: {
                    top: '3%'
                },
                tooltip: {
                    confine: true,
                    position: 'top',
                    formatter: (params) => {
                        return `${params.name} — ${this.selectedField[params.data[1]]} : ${params.data[2]}`
                    }
                },
                animation: false,
                xAxis: {
                    type: 'category',
                    data: this.selectedField,
                    splitArea: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        rotate: -this.selectedField.length * 1.5,
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'category',
                    data: this.selectedField,
                    splitArea: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        formatter: (params) => {
                            return params.length > 7 ? params.slice(0, 7) + '...' : params
                        },
                        fontSize: 12
                    }
                },
                visualMap: {
                    min: -1,
                    max: 1,
                    calculable: false,
                    orient: 'vertical',
                    right: '2%',
                    bottom: '10%',
                    inRange: {
                        color: ['#F2B473', '#FFFFFF', '#6BA3DB']
                    },
                    precision: 1,
                    text: [1, -1]
                },
                series: [{
                    type: 'heatmap',
                    data: this.chartData,
                    label: {
                        normal: {
                            show: true,
                            color: '#333333'
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            }
            if (this.radio === '互信息') {
                for (let j = 0; j < this.showList.length; j++) {
                    this.originData[this.showList[j]] = this.analysisReportData.content[this.radio][this.showList[j]]
                }
                this.originData = this.originData.filter(v => v)
                for (let i = 0; i < this.originData.length; i++) {
                    this.chartData.push([i, 0, Math.floor(this.originData[i] * 1000) / 1000])
                }
                for (let i = 0, l = this.analysisReportData.content['散点图'].length; i < l; i++) {
                    if (this.analysisReportData.content['散点图'][i].featureType === 'label') {
                        option.yAxis.data = [this.analysisReportData.content['散点图'][i].featureName]
                    }
                }
                option.tooltip.formatter = (params) => {
                    return `${params.name} — ${option.yAxis.data[0]} : ${params.data[2]}`
                }
                option.xAxis.data = []
                option.xAxis.data = this.selectedField
            }
            myChart.setOption(option)
            window.addEventListener('resize', () => myChart.resize())
            this.$nextTick(() => {
                window.removeEventListener('resize', () => myChart.resize())
            })
        }
    }
}
</script>

<style lang="less">
    .correlation-matrix {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        .chart-label {
            display: flex;
            align-items: center;
            word-wrap: break-word;
            word-break: normal;
            position: absolute;
            width: 14px;
            font-size: 14px;
            right: 0px;
            bottom: 25%;
            color: #333333;
        }
    }
</style>
